var top     = document.body;
var sprites = false;
var goal    = false;

/* http://www.csscripting.com/css-multi-column/dom-width-height.php */
var w = top.scrollWidth  ? top.scrollWidth  : 800;
var h = top.scrollHeight ? top.scrollHeight : 600;

var SpriteTask = function( sprite ) {
	this.sprite = sprite;
	this.run = function( t ) {
		sprite.towards( goal );
		sprite.move();
		return true; /* still running */
	};
};

var BouncySprites = function() {
	this.run = function( t ) {
		var w = sprites[ 0 ].getW();
		var h = sprites[ 0 ].getW();
		var count = 0;
		for ( var i = 0 ; i < sprites.length ; i++ ) {
			var a = sprites[ i ];
			var ax = a.getPosition().getX();
			var ay = a.getPosition().getY();
			var axi = 0;
			var ayi = 0;
			for ( var j = i + 1 ; j < sprites.length ; j++ ) {
				var b = sprites[ j ];
				var bx = b.getPosition().getX();
				var by = b.getPosition().getY();
				if ( 
					HitTest.boxesOverLap( ax,ay,w,h , bx,by,w,h ) 
					||
					HitTest.boxesOverLap( bx,by,w,h , ax,ay,w,h ) 
				) {
					var ox = ( ax - bx ) / 4;
					var oy = ( ay - by ) / 4;
					b.getPosition().setX( bx - ox );
					b.getPosition().setY( by - oy );
					axi += ox;
					ayi += oy;
				}
			}
			a.getPosition().setX( ax + axi );
			a.getPosition().setY( ay + ayi );
		}
		return true; /* still running */
	};
};

var initSprite = function( id, image ) {
	var sprite = SpriteFactory.fromBean(
		{
			id:id
			, image:image
			, directions:
			[
				  ( { name:'up'    , delta:{x:0,y:-4} , frames:[{x:0,y: 0},{x:32,y: 0}] } )
				, ( { name:'down'  , delta:{x:0,y:+4} , frames:[{x:0,y:32},{x:32,y:32}] } )
				, ( { name:'left'  , delta:{x:-4,y:0} , frames:[{x:0,y:64},{x:32,y:64}] } )
				, ( { name:'right' , delta:{x:+4,y:0} , frames:[{x:0,y:96},{x:32,y:96}] } )
			] 
		}
	);

	sprite.getPosition().setX( Math.random() * w );
	sprite.getPosition().setY( Math.random() * h );
	Timer.addTask( new SpriteTask( sprite ) );

	sprite.draw();

	return sprite;
};

var initSprites = function( count ) {
	var sprites = [];
	while ( count-- > 0 ) {
		var id = 'sprite_' + count;
		var div = Util.newNode( 'div', {id:id} );
		
		top = document.body;
		//top.appendChild( div ); // <-- why doesn't this work?
		document.body.appendChild( div );

		sprites.push( initSprite( id, '../images/sprites/sprite_skl1.png' ) );
	}
	return sprites;
};

try{
	document.captureEvents( Event.MOUSEMOVE );
} catch( e ) {}

document.onmousemove = function( e ) {
	var pos = MouseUtil.getMouseXY( e );
	goal = new Point2d( pos.x, pos.y );
};

document.onclick = function( e ) { 
	var pos = MouseUtil.getMouseXY( e );

	for ( var i = 0 ; i < sprites.length ; i++ ) {
		var sprite = sprites[ i ];
		var sx = sprite.getPosition().getX();
		var sy = sprite.getPosition().getY();
		if ( HitTest.pointInBox( sx, sy, sprite.getW(), sprite.getH(), pos.x, pos.y ) ) {
			sprite.getPosition().setX( Math.random() * w );
			sprite.getPosition().setY( Math.random() * h );

			var ouch = Util.id( 'ouch' );
			var text = Util.id( 'ouch_text' );
			
			text.replaceChild(
				Util.newText( 'Ouch! That hurt me(' + i + ')! ' )
				, text.firstChild
			);

			var sx = sprite.getPosition().getX();
			var sy = sprite.getPosition().getY();

			Util.moveElement( ouch, sx, sy -42 );
			Util.completelyVisible( ouch );
			Timer.addTask(
				new TimedUtil.afterClicksRun(
					20
					, function() { TimedUtil.fadeOutElement( ouch ); }
				)
			);

		}
	}
};

var start = function() {
	/* 
		not super happy with this old js... 
		here is a fix for the load timing
	*/
	top = document.body;
	w = top.scrollWidth ? top.scrollWidth : 800;
	h = top.scrollHeight ? top.scrollHeight : 600;

	Timer.delay = 60;
	sprites = initSprites( 10 );
	goal = new Point2d( 0, 0 );
	Timer.addTask( new BouncySprites() );
};

window.onload = start;
